<template>
    <div class="order-table">
        <el-card shadow="hover" :body-style="{ padding: '10px 0px ' }" class="table-header">
            <el-row type="flex" justify="center">
                <el-col class="tableCol" :style="{ width: '200px' }">
                    {{ tableCol[0].zh }}
                </el-col>
                <el-col class="tableCol" :style="{ width: '120px' }">
                    {{ tableCol[1].zh }}
                </el-col>
                <el-col class="tableCol" :style="{ width: '120px' }">
                    {{ tableCol[2].zh }}
                </el-col>
                <el-col class="tableCol" :style="{ width: '120px' }">
                    {{ tableCol[3].zh }}
                </el-col>
                <el-col class="tableCol" :style="{ width: '180px' }">
                    {{ tableCol[4].zh }}
                </el-col>
                <el-col class="tableCol" :style="{ width: '180px' }">
                    {{ tableCol[5].zh }}
                </el-col>
                <el-col class="tableCol" :style="{ width: '180px' }">
                    {{ tableCol[6].zh }}
                </el-col>
                <el-col class="tableCol" :style="{ width: '180px' }">
                    {{ tableCol[7].zh }}
                </el-col>
                <el-col class="tableCol" :style="{ width: '180px' }">
                    {{ tableCol[8].zh }}
                </el-col>
            </el-row>
        </el-card>
        <el-row v-for="(item, itemIndex) in orderList" :key="item.id + itemIndex">
            <el-card
                shadow="hover"
                class="order-item table-header"
                :body-style="{ padding: '10px 20px' }"
            >
                <el-row type="flex" justify="space-around">
                    <span class="item-icon" @click="handleTableOpen(item.id)">
                        <i class="header-icon el-icon-s-unfold"></i>
                    </span>
                    <el-col>订单号：{{ item.id }}</el-col>

                    <el-col>下单时间：{{ item.createTime }}</el-col
                    ><el-col>支付流水号：{{ item.createTime }}</el-col
                    ><el-col class="operate-button"
                        ><span @click="orderDetail(item)">订单详情</span></el-col
                    ></el-row
                >
            </el-card>
            <div
                class="table-content"
                :style="openSwitch[item.id] ? { display: 'none' } : { display: 'block' }"
            >
                <el-table :data="item.itemList" :show-header="false">
                    <el-table-column prop="goods" label="商品" align="center" :width="200">
                        <template slot-scope="scope">
                            <el-row type="flex" justify="center">
                                <el-avatar shape="square" :size="50" :src="scope.row.resourceUrl">
                                    <img
                                        src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                                    />
                                </el-avatar>
                                <div class="goods-info">
                                    <div class="goods-name" :title="scope.row.goodsName">
                                        {{ scope.row.goodsName }}
                                    </div>
                                </div>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sellPrice" label="单价" align="center" :width="120">
                    </el-table-column>
                    <el-table-column prop="quantity" label="数量" align="center" :width="120">
                    </el-table-column>
                    <el-table-column
                        prop="totalAmount"
                        label="实付金额"
                        align="center"
                        :width="120"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="planDeliveryTime"
                        label="发货日期"
                        align="center"
                        :width="180"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="receiver"
                        label="买家/收货人"
                        align="center"
                        :width="180"
                    >
                        <template
                            ><span style="display:block">{{ item.receiver }}</span
                            ><span style="display:block">{{ item.receiverMobile }}</span></template
                        >
                    </el-table-column>
                    <el-table-column prop="address" label="社区店" align="center" :width="180">
                        <template> {{ item.communityName }}</template>
                    </el-table-column>
                    <el-table-column prop="address" label="团长信息" align="center" :width="180">
                    </el-table-column>
                    <el-table-column prop="status" label="订单状态" align="center" :width="180">
                        <template slot-scope="scope">{{ orderStatus[scope.row.status] }}</template>
                    </el-table-column>
                </el-table>
            </div>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'orderTable',
    created() {},
    props: {
        orderList: {
            type: Array,
            default: () => {
                return [
                    {
                        communityName: '1212',
                        id: 1,
                        createTime: '2020-03-27T04:04:05.865Z',
                        extOrderNo: 'string',
                        itemList: [
                            {
                                goodsName: 'string',
                                planDeliveryTime: '2020-03-27T04:04:05.865Z',
                                quantity: 0,
                                resourceUrl: 'string',
                                status: 'WAIT_PAY',
                                totalAmount: 0
                            }
                        ],
                        receiver: 'string',
                        receiverMobile: 'string'
                    },
                    {
                        communityName: '1212',
                        id: 3,
                        createTime: '2020-03-27T04:04:05.865Z',
                        extOrderNo: 'string',
                        itemList: [
                            {
                                goodsName: 'string',
                                planDeliveryTime: '2020-03-27T04:04:05.865Z',
                                quantity: 0,
                                resourceUrl: 'string',
                                status: 'WAIT_PAY',
                                totalAmount: 0
                            },
                            {
                                goodsName: 'string',
                                planDeliveryTime: '2020-03-27T04:04:05.865Z',
                                quantity: 0,
                                resourceUrl: 'string',
                                status: 'WAIT_PAY',
                                totalAmount: 0
                            }
                        ],
                        receiver: 'string',
                        receiverMobile: 'string'
                    }
                ];
            }
        }
    },
    data() {
        return {
            tableCol: [
                { zh: '商品', en: 'goodsName' },
                { zh: '单价', en: 'price' },
                { zh: '数量', en: 'quantity' },
                { zh: '实付金额', en: 'totalAmount' },
                { zh: '发货日期', en: 'planDeliveryTime' },
                { zh: '买家/收货人', en: 'receiver' },
                { zh: '社区店', en: 'receiver' },
                { zh: '团长信息', en: 'head' },
                { zh: '订单状态', en: 'status' }
            ],
            openSwitch: {},
            orderListDefault: [
                {
                    communityName: '1212',
                    id: 1,
                    createTime: '2020-03-27T04:04:05.865Z',
                    extOrderNo: 'string',
                    itemList: [
                        {
                            goodsName: 'string',
                            planDeliveryTime: '2020-03-27T04:04:05.865Z',
                            quantity: 0,
                            resourceUrl: 'string',
                            status: 'WAIT_PAY',
                            totalAmount: 0
                        }
                    ],
                    receiver: 'string',
                    receiverMobile: 'string'
                },
                {
                    communityName: '1212',
                    id: 3,
                    createTime: '2020-03-27T04:04:05.865Z',
                    extOrderNo: 'string',
                    itemList: [
                        {
                            goodsName: 'string',
                            planDeliveryTime: '2020-03-27T04:04:05.865Z',
                            quantity: 0,
                            resourceUrl: 'string',
                            status: 'WAIT_PAY',
                            totalAmount: 0
                        },
                        {
                            goodsName: 'string',
                            planDeliveryTime: '2020-03-27T04:04:05.865Z',
                            quantity: 0,
                            resourceUrl: 'string',
                            status: 'WAIT_PAY',
                            totalAmount: 0
                        }
                    ],
                    receiver: 'string',
                    receiverMobile: 'string'
                }
            ],
            orderStatus: {
                WAIT_PAY: '待付款',
                IN_STOCK: '备货中',
                WAIT_TAKEOFF: '待提货',
                SHUTDOWN: '已关闭',
                FINISHED: '已完成'
            }
        };
    },
    methods: {
        handleTableOpen(index) {
            // 数据变更, 在 v-for 中 之中使用这种方式才能引起数据变更
            // for (let i = 0; i < len; i++) {
            //     this.openSwitch.push(true);
            // }

            this.$set(this.openSwitch, index, !this.openSwitch[index]);
        },
        orderDetail(item) {
            this.$router.push(`detail/${item.id}`);
        }
    }
};
</script>

<style lang="scss" scoped>
.tableCol {
    text-align: center;
    font-size: 14px;
    color: #909399;
    font-weight: bold;
}
.order-item {
    margin-top: 10px;
    font-size: 14px;
}
.operate-button {
    color: #409eff;
    cursor: pointer;
    text-align: right;
    margin-right: 10px;
}
.item-icon {
    margin-right: 10px;
    cursor: pointer;
    font-size: 16px;
}
.item-icon:hover {
    color: #409eff;
}

.table-content {
    font-size: 14px;
    .table-row {
        padding: 10px 10px;
        border-bottom: 1px solid #e3e2e5;
        &:last-child {
            border: none;
        }
    }
    .table-area {
        text-align: center;
        height: 60px;
        display: table-cell;
        vertical-align: middle;
    }
    .goods-info {
        width: 100px;
    }
    .goods-name {
        width: 100px;
        //  height: 60px;
        text-align: start;
        padding-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        margin-top: 5px;
    }
}
.table-header {
    min-width: 1490px;
}
// .order-table {
//     padding-left: 20px;
//     padding-right: 20px;
// }
</style>
<style lang="scss">
.order-table {
    .el-card {
        border: 1px solid #000;
    }
    .el-table__body-wrapper {
        // padding: auto;
        display: flex;
        justify-content: center;
        min-width: 1490px;
    }
}
</style>
